<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #d{
        width: 200px;
        height: 320px;
        background: darkgrey;
        float: left;
    }
    #d ul {
        width: 150px;
        height: 300px;
    }
    #d ul li{
        list-style: none;
        color: black;
        font-size: 20px;
        text-align: center;
        line-height: 50px;
    }
    #d ul li:hover{
        background: dodgerblue;
    }
    #b{
        width: 300px;
        height: 200px;
        margin-left: 300px;
    }
    #b img{
        width: 100px;
        height: 100px;
        display: none;
        
    }
</style>
<body>
    <div id="d">
        <ul>
            <li id="b1" onclick="fun1()">第一张图片</li>
            <li id="b2" onclick="fun2()">第二张图片</li>
            <li id="b3" onclick="fun3()">第三张图片</li>
            <li id="b4" onclick="fun4()">第四张图片</li>
            <li id="b5" onclick="fun5()">第五张图片</li>
            <li id="b6" onclick="fun6()">第六张图片</li>
        </ul>
    </div>
    <div id="b">
        
        <img src="./img/233149-162022870979b1.jpg" alt="" id="dd1">
        <img src="./img/233556-16309425562948.jpg" alt="" id="dd2">
        <img src="./img/234248-16350037685cae.jpg" alt="" id="dd3">
        <img src="./img/230152-16212637128808.jpg" alt="" id="dd4">
        <img src="./img/t015801989cf57f46ea.jpg" alt="" id="dd5">
        <img src="./img/222034-16212612346da0.jpg" alt="" id="dd6">

    <ul>
        <img src="./img/163152-149397311229e7.jpg" alt="" id="d1">
        <img src="./img/214648-16157296085fc8.jpg" alt="" id="d2">       
        <img src="./img/220410-16157306509333.jpg" alt="" id="d3">       
        <img src="./img/t015801989cf57f46ea.jpg" alt="" id="d4">              
        <img src="./img/t01696b121dc8c3a1b7.jpg" alt="" id="d5"> 
        <img src="./img/6.jpeg" alt="" id="d6">
    </ul>
    </div>
</body>
<script>
    function fun1() {
        document.getElementById('d1').style.display = 'block'
        document.getElementById('dd1').style.display = 'block'
        document.getElementById('d2').style.display = 'none' 
        document.getElementById('d3').style.display = 'none'
        document.getElementById('d4').style.display = 'none'
        document.getElementById('d5').style.display = 'none'
        document.getElementById('d6').style.display = 'none'
    }
    
    function fun2() {
        document.getElementById('d1').style.display = 'none'
        document.getElementById('d2').style.display = 'block'
        document.getElementById('dd2').style.display = 'block'
        document.getElementById('d3').style.display = 'none'
        document.getElementById('d4').style.display = 'none'
        document.getElementById('d5').style.display = 'none'
        document.getElementById('d6').style.display = 'none'
        
    }
    
    function fun3() {
        document.getElementById('d1').style.display = 'none'
        document.getElementById('d2').style.display = 'none'
        document.getElementById('d3').style.display = 'block'
        document.getElementById('dd3').style.display = 'block'
        document.getElementById('d4').style.display = 'none'
        document.getElementById('d5').style.display = 'none'
        document.getElementById('d6').style.display = 'none'
    }
    
    function fun4() {
        document.getElementById('d1').style.display = 'none'
        document.getElementById('d2').style.display = 'none'
        document.getElementById('d3').style.display = 'none'
        document.getElementById('d4').style.display = 'block'
        document.getElementById('dd4').style.display = 'block'
        document.getElementById('d5').style.display = 'none'
        document.getElementById('d6').style.display = 'none'
    }
    
    function fun5() {
        document.getElementById('d1').style.display = 'none'
        document.getElementById('d2').style.display = 'none'
        document.getElementById('d3').style.display = 'none'
        document.getElementById('d4').style.display = 'none'
        document.getElementById('d5').style.display = 'block'
        document.getElementById('dd5').style.display = 'block'
        document.getElementById('d6').style.display = 'none'
    }

    function fun6() {
        document.getElementById('d1').style.display = 'none'
        document.getElementById('d2').style.display = 'none'
        document.getElementById('d3').style.display = 'none'
        document.getElementById('d4').style.display = 'none'
        document.getElementById('d5').style.display = 'none'
        document.getElementById('d6').style.display = 'block'
        document.getElementById('dd6').style.display = 'block'
    }
</script>
</html>